<template>
  <div class="welcome-section">
    <div class="welcome-content">
      <div class="user-info">
        <div class="avatar-container">
          <el-avatar :size="60" :src="userInfo.userPicId">
            <el-icon size="30"><User /></el-icon>
          </el-avatar>
          <div class="online-status"></div>
        </div>
        <div class="user-details">
          <h2 class="welcome-text">{{ welcomeMessage }}</h2>
          <p class="user-meta">
            <span class="username">{{ userInfo.userName }}</span>
            <el-divider direction="vertical" />
            <span class="current-time">{{ currentTime }}</span>
          </p>
        </div>
      </div>
      <div class="welcome-actions">
        <el-button type="primary" @click="handleQuickAction('profile')">
          <el-icon><User /></el-icon>
          个人信息
        </el-button>
        <!-- <el-button @click="handleQuickAction('settings')">
          <el-icon><Setting /></el-icon>
          系统设置
        </el-button> -->
        <el-tooltip content="刷新数据" placement="bottom">
          <el-button circle :loading="loading" @click="$emit('refresh')">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="welcome-background">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>
    <!-- infoDialog -->
    <InfoDialog ref="infoRef"></InfoDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { User, Refresh } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules/user";
import { storeToRefs } from "pinia";
import InfoDialog from "@/layouts/components/Header/components/InfoDialog.vue";

interface Props {
  loading?: boolean;
}

defineProps<Props>();
defineEmits<{
  refresh: [];
}>();

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const currentTime = ref("");
let timer: NodeJS.Timeout | null = null;

// 更新当前时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    weekday: "long"
  });
};

// 欢迎消息
const welcomeMessage = computed(() => {
  const hour = new Date().getHours();
  const name = userInfo.value.userName || "管理员";

  if (hour < 6) {
    return `夜深了，${name}`;
  } else if (hour < 9) {
    return `早上好，${name}`;
  } else if (hour < 12) {
    return `上午好，${name}`;
  } else if (hour < 14) {
    return `中午好，${name}`;
  } else if (hour < 17) {
    return `下午好，${name}`;
  } else if (hour < 19) {
    return `傍晚好，${name}`;
  } else {
    return `晚上好，${name}`;
  }
});

// 快速操作
const handleQuickAction = (action: string) => {
  switch (action) {
    case "profile":
      openDialog("infoRef");
      break;
  }
};

// 打开修改密码和个人信息弹窗
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
const openDialog = (ref: string) => {
  if (ref == "infoRef") infoRef.value?.openDialog();
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000 * 60); // 每分钟更新一次
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
.welcome-section {
  position: relative;
  padding: 30px;
  margin-bottom: 24px;
  overflow: hidden;
  color: white;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  border-radius: 12px;
  .welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-info {
      display: flex;
      gap: 20px;
      align-items: center;
      .avatar-container {
        position: relative;
        .online-status {
          position: absolute;
          right: 2px;
          bottom: 2px;
          width: 12px;
          height: 12px;
          background: #67c23a;
          border: 2px solid white;
          border-radius: 50%;
        }
      }
      .user-details {
        .welcome-text {
          margin: 0 0 8px;
          font-size: 24px;
          font-weight: 600;
          color: white;
        }
        .user-meta {
          display: flex;
          align-items: center;
          margin: 0;
          font-size: 14px;
          color: rgb(255 255 255 / 80%);
          .username {
            font-weight: 500;
          }
          .el-divider {
            margin: 0 12px;
            border-color: rgb(255 255 255 / 30%);
          }
        }
      }
    }
    .welcome-actions {
      display: flex;
      gap: 12px;
      align-items: center;
      .el-button {
        &:not(.is-circle) {
          color: var(--el-color-primary);
          border-color: white;
          &:hover {
            background: rgb(255 255 255 / 90%);
          }
        }
        &.is-circle {
          color: white;
          background: rgb(255 255 255 / 20%);
          border-color: rgb(255 255 255 / 30%);
          &:hover {
            background: rgb(255 255 255 / 30%);
            border-color: rgb(255 255 255 / 50%);
          }
        }
      }
    }
  }
  .welcome-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    .decoration-circle {
      position: absolute;
      background: rgb(255 255 255 / 10%);
      border-radius: 50%;
      &.circle-1 {
        top: -60px;
        right: 100px;
        width: 120px;
        height: 120px;
      }
      &.circle-2 {
        bottom: -40px;
        left: 50px;
        width: 80px;
        height: 80px;
      }
      &.circle-3 {
        top: -100px;
        right: -100px;
        width: 200px;
        height: 200px;
        background: rgb(255 255 255 / 5%);
      }
    }
  }
}

// 响应式设计
@media (width <= 768px) {
  .welcome-section {
    padding: 20px;
    .welcome-content {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      .user-info {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        .user-details {
          .welcome-text {
            font-size: 20px;
          }
          .user-meta {
            justify-content: center;
          }
        }
      }
      .welcome-actions {
        justify-content: center;
        width: 100%;
      }
    }
  }
}
</style>
